<template>
    <div class="form" :class="{blackTheme:themeDo('black'),goldenTheme:themeDo('golden')}">
        <div class="welcome" :class="{'blackTheme':false}">欢迎登录</div>
        <div class="form-input">
            <div class="input-item">
                <img class="input-item-icon" :src="themeIconAccount()" alt="图片" width="16px"
                     height="16px">
                <input placeholder="请输入账号" :maxlength="32" @keyup.enter="login" />
            </div>
            <div class="input-item">
                <img :src="themeIconPassword()" alt="图片" width="16px" height="16px">
                <input placeholder="请输入密码" type="password" :maxlength="32" @keyup.enter="login"/>
            </div>
        </div>
        <div class="login-button-row">
            <button @click="login" class="login-button"
                    :class="{blackThemeButton:themeDo('black'),goldenThemeButton:themeDo('golden')}">
                登录
            </button>
        </div>
    </div>
</template>

<script>
    import iconAccount from './img/icon-account.png'
    import iconAccountWhite from './img/icon-account-white.png'
    import iconPassword from './img/icon-password.png'
    import iconPasswordWhite from './img/icon-password-white.png'

    export default {
        name: "LoginForm",
        props: {
            theme: {
                type: String,
                default: ''
            },
            top:{},
            left:{}
        },
        data() {
            return {
                iconAccount: iconAccount,
                iconPassword: iconPassword,
                iconAccountWhite: iconAccountWhite,
                iconPasswordWhite: iconPasswordWhite,
            }
        },
        methods: {
            themeIconAccount(){
                if(this.theme==='black'){
                    return iconAccountWhite
                }

                if(this.theme==='golden'){
                    return iconAccountWhite
                }

                return iconAccount
            },
            themeIconPassword(){
                if(this.theme==='black'){
                    return iconPasswordWhite
                }

                if(this.theme==='golden'){
                    return iconPasswordWhite
                }

                return iconPassword
            },
            themeDo(type) {
                return type === this.theme;
            },
            login() {
                this.$navTo('/home')
            }
        }
    }
</script>

<style scoped>
    .form input {
        background: #ffffff00;
        color: #333333;
        padding: 7px 7px;
        outline: none;
        width: 100%;
        border: none;
    }

    .form button {
        color: #333333;
        padding: 7px 7px;
        outline: none;
        width: 100%;
        border: none;
    }

    .form input::placeholder {
        color: #c5c8ce;
        font-size: 12px;
    }

    .form {
        background: #ffffff;
        padding: 16px 0;
        border-radius: 5px;
        box-shadow: 0 0 5px 2px #bababa;
        min-width: 250px;
        width: 250px;
    }

    .welcome {
        text-align: left;
        padding: 0 16px 16px 16px;
        border-bottom: 1px solid #d2d4d6;
        font-weight: bold;
        margin-bottom: 16px;
    }

    .form-input {
        padding: 0 16px;
    }

    .input-item {
        display: flex;
        align-items: center;
        padding: 0 0 0 4px;
        position: relative;
        border-radius: 3px;
        border: 1px solid #c8cccf;
        margin-bottom: 32px;
    }

    .login-button-row {
        padding: 0 16px;
    }

    .form .login-button-row button {
        color: #ffffff;
    }

    .form .login-button-row button:hover {
        cursor: pointer;
    }

    .login-button {
        background: #2d8cf0;
        border-radius: 4px;
    }



    /*黑色主题样式-start*/
    .blackTheme {
        background: linear-gradient(to bottom, #2e3035 0%, #000 100%);
        color: #fff;
    }

    .blackThemeButton {
        background: linear-gradient(to bottom, #767880 0%, #4d4d4d 100%);
        color: #fff;
    }

    .blackTheme input {
        color: #ffffff;
    }
    /*黑色主题样式-end*/

    /*金色主题样式-start*/
    .goldenTheme {
        background: linear-gradient(to bottom, #e3a252 0%, #9f7750 100%);
        color: #fff;
    }

    .goldenThemeButton {
        background: linear-gradient(to bottom, #9c6b41 0%, #815839 100%);
        color: #fff;
    }

    .goldenTheme input {
        color: #ffffff;
    }
    /*金色主题样式-end*/
</style>